<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>JSONP</title>
</head>
<body>
<div id="TButtonList"></div>
<div id="myDiv"><h2>使用 AJAX 修改文本内容</h2></div>
<script>
function $id(s) { return document.getElementById(s); }
var xmlhttp;
var ctx = "http://typhoon.nmc.cn/weatherservice";

// https://www.cnblogs.com/soyo/p/6860345.html
function loadXMLDoc(url,cfunc){
	if (window.XMLHttpRequest) {
		// IE7+, Firefox, Chrome, Opera, Safari 代码
  		xmlhttp = new XMLHttpRequest();
  	} else {
   		// IE6, IE5 代码
  		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  	}
	xmlhttp.onreadystatechange = cfunc;
	xmlhttp.open("GET",url,true);
	xmlhttp.send();
}

function genTyphoonList(url){
	loadXMLDoc(url,function(data) {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {			
			//console.log(data);
			var s = xmlhttp.responseText;
			s = s.substring(s.indexOf('((')+2,s.lastIndexOf('))'));
			var typhoonList = JSON.parse(s).typhoonList;
			console.log(typhoonList);
            $id("myDiv").innerHTML = s;
			for(i=0; i<typhoonList.length; i++){
				var button = document.createElement('button');
				button.id = typhoonList[i][0];
				button.textContent = typhoonList[i][2];
				$id('TButtonList').appendChild(button);
				$id(button.id).addEventListener('click',function(){
					drawTyphoon(ctx + "/typhoon/jsons/view_" + this.id);
				}, false);
			}
        }
    });
}
var url = "http://typhoon.nmc.cn/weatherservice/typhoon/jsons/list_default";
genTyphoonList(url);

function drawTyphoon(url){
    loadXMLDoc(url,function(data) {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {			
			var s = xmlhttp.responseText;
			var json = JSON.parse(s.substring(s.indexOf('(')+1,s.lastIndexOf(')')));
			console.log(json);
            $id("myDiv").innerHTML = s;
        }
    });
}
</script>
</body>
</html>